<template>
  <div id="app">
    <h1>{{msg}} </h1>
    <p>--------我是app内容----</p>
    <!-- <h2>{{counter}}</h2> -->
    <h4>{{$store.state.counter}}</h4>
    <p>{{$store.getters.squareCounter}}</p>
    <h4>{{$store.getters.more20stu}} </h4>


    <button @click="addition">++</button>
    <button @click="Subtraction">--</button>
    <p>--------我是hellow内容----</p>

    <HelloWorld/>

  <br>
  <p>{{$store.getters.moreAgeStu(22)}} </p>

  </div>
</template>

<script>
// import Subtraction from '@/components/Subtraction'
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',

  data () {
    return{
      msg:'我是app的根组件'
    };
  },
  components:{
    // Subtraction,
    HelloWorld,
  },
  methods: {
    addition() {
      this.$store.commit('increment')
    },
    Subtraction() {
      this.$store.commit('decrement')
    }

  },
 
  
}
</script>

<style>
#app {
 
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
